<template>
    <basic-container>
        <!--<div id="twoBox" class="drag-two-box">-->
            <!--<div id="twoleft" class="drag-two-left">-->
                <!--<Left />-->
            <!--</div>-->
            <!--<div id="tworesize" class="drag-two-resize"></div>-->
            <!--<div id="tworight" class="drag-two-right">-->
                <!--<Right />-->

            <!--</div>-->
        <!--</div>-->



    </basic-container>
</template>

<script>
import Left from './left.vue';

import Right from './right.vue';
// import ResizeBox from './resize.vue'
export default {
    components: {
        // ResizeBox,
        Left,
        Right
    },
    data() {
        return {
            resizeConf: {
                width: 1200,
                widthRange: [1000, 1800]
            }
        }
    },
    mounted() {
        // this.dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
    },
    methods: {
        // dragTwoColDiv(contentId, leftBoxId, resizeId, rightBoxId) {
        //     let resize = document.getElementById(resizeId);
        //     let leftBox = document.getElementById(leftBoxId);
        //     let rightBox = document.getElementById(rightBoxId);
        //     let box = document.getElementById(contentId);
        //     resize.onmousedown = function (e) {
        //         let startX = e.clientX;
        //         resize.left = resize.offsetLeft;
        //         document.onmousemove = function (e) {
        //             let endX = e.clientX;
        //             let moveLen = resize.left + (endX - startX);
        //             let maxT = box.clientWidth - resize.offsetWidth;
        //             if (moveLen < 150) moveLen = 150;
        //             if (moveLen > maxT - 150) moveLen = maxT - 150;
        //             resize.style.left = moveLen;
        //             leftBox.style.width = moveLen + 'px';
        //             rightBox.style.width = (box.clientWidth - moveLen - 5) + 'px';
        //         }
        //         document.onmouseup = function () {
        //             document.onmousemove = null;
        //             document.onmouseup = null;
        //             resize.releaseCapture && resize.releaseCapture();
        //         }
        //         resize.setCapture && resize.setCapture();
        //         return false;
        //     }
        // }
    }
}



</script>

<style lang="scss">
.sa-flex {
    display: flex;
    flex-wrap: no-wrap;
    justify-content: end;
}

.sa-flex-1 {
    flex: 1
}

.main-container {
    min-height: 600px;
}

/*两列 */
#twoBox {
    display: flex;
}

#twoleft {
    width: calc(80% - 10px);
}

#tworesize {
    width: 5px;
    cursor: w-resize;
}

#tworight {
    width: 20%;
}

/* 三列 */
#contentId {
    display: flex;
}

#leftId {
    width: calc(20% - 10px);
}

#resizeOne {
    width: 5px;
    cursor: w-resize;
}

#centerId {
    width: 60%;
}

#resizeTwo {
    width: 5px;
    cursor: w-resize;
}

#rightId {
    width: 20%;
}

/* 两横 */
#mainId {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#topBoxId {
    height: calc(80% - 5px);
}

#resizeId {
    height: 5px;
    cursor: s-resize;
}

#downBoxId {
    height: 20%;
}


.all {
    padding: 30px;
    list-style: none;
}

.drag-main {
    margin-bottom: 30px;

    h2 {
        margin-bottom: 30px;
    }
}

.drag-two-box {
    display: flex;
    .drag-two-resize {
        width: 5px;
        cursor: w-resize;
        background: #dddee0;
    }
}
</style>
